<template>
    <el-dialog class="add-manage" width="1000px" title="添加人员" :visible.sync="show" :append-to-body="true" :close-on-click-modal="false" :before-close="closeDialog">
        <div class="search-box">
            <div class="search-form">
                <el-input placeholder="请输入姓名" v-model="ruleForm.usernameLk">
                    <template slot="append">
                        <el-button @click="clickQuery">搜索</el-button>
                    </template>
                </el-input>
            </div>
            <div class="btn-wrap">
                <el-button type="text" @click="removeAll">全部移除</el-button>
            </div>
        </div>
        <div class="table-wrap">
            <div class="table-list">
                <div class="flex-1">
                    <el-table
                        v-loading="loading"
                        :data="tableData.columnData"
                        height="100%"
                        @select="selectChange"
                        @select-all="selectionAll">
                        <el-table-column type="selection" width="50"></el-table-column>
                        <el-table-column label="姓名" prop="username" min-width="120" align="left"></el-table-column>
                        <el-table-column label="工号" prop="employeeNo" min-width="100"></el-table-column>
                        <el-table-column label="状态" prop="userStatusName" min-width="100"></el-table-column>
                        <el-table-column label="邮箱" prop="email" min-width="150" align="left"></el-table-column>
                    </el-table>
                </div>
                <div class="pagination">
                    <el-pagination 
                        :page-sizes="[5,10,15,30,50]" 
                        :page-size="tableData.pageSize" 
                        layout="sizes,total,prev,pager,next" 
                        :total="tableData.total" 
                        :current-page="tableData.currentPage" 
                        @size-change="handleSizeChange" 
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
            <div class="selected">
                <el-table
                    :data="tableData2"
                    height="100%">
                    <el-table-column label="已选择" prop="username" align="left">
                        <template slot="header" slot-scope="scope">
                            已选择 {{ tableData2.length }} 人
                        </template>
                    </el-table-column>
                    <el-table-column prop="" width="60">
                        <template slot-scope="scope">
                            <el-button type="text" @click="removeItem(scope.row)">移除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div slot="footer">
            <el-button type="primary" @click="submitFun" :disabled="tableData2.length == 0" :loading="loading2">保存</el-button>
            <el-button @click="closeDialog">取消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { userPageQueryAuth, addDeptDutyUser } from "../../service.js";
export default {
    name: 'addManage', // 添加管理员
    props: {
        deptId: String
    },
    components: {},
    data() {
        return {
            show: false,
            ruleForm: {
                usernameLk: '',
            },
            tableData: {
                columns: 'username',
                orders: 'ASC',
                currentPage: 1,
                pageSize: 10,
                total: 0,
                columnData: []
            },
            tableData2: [],
            loading: false,
            loading2: false,
        }
    },
    methods: {
        showDialog() {
            this.show = true;
            this.ruleForm.usernameLk = '';
            this.clickQuery();
        },
        closeDialog() {
            this.show = false;
            this.tableData2 = [];
        },
        clickQuery() {
            this.tableData.currentPage = 1;
            this.queryList();
        },
        queryList() {
            let params = {
                rowSize: this.tableData.pageSize,
                startRow: this.tableData.currentPage,
                columns: this.tableData.columns,
                orders: this.tableData.orders,
                usernameLk: this.ruleForm.usernameLk,
            };
            this.loading = true;
            userPageQueryAuth(params).then(response => {
                this.tableData.columnData = [];
                if (response.data.code == 1000) {
                    let data = response.data.data;
                    if(Array.isArray(data.data) && data.data.length > 0) {
                        this.tableData.columnData = [...data.data];
                        this.tableData.total = data.total;
                    }else {
                        this.tableData.total = 0;
                        this.tableData.currentPage = 1;
                    }
                }
                this.loading = false;
            }).catch(error => {
                this.loading = false;
            })
        },
        handleSizeChange(val) {
            this.tableData.pageSize = val;
            this.tableData.currentPage = 1;
            this.queryList();
        },
        handleCurrentChange(val) {
            this.tableData.currentPage = val;
            this.queryList();
        },
        selectChange(selection, row) {
            let index = this.tableData2.findIndex(item => item.id == row.id);
            if(index == -1) {
                this.tableData2.push(row);
            }
        },
        selectionAll(selection) {
            let arr = selection;
            arr.forEach(item => {
                if(this.tableData2.findIndex(item2 => item2.id == item.id) == -1) {
                    this.tableData2.push(item);
                }
            })
        },
        removeAll() {
            this.tableData2 = [];
        },
        removeItem(row) {
            let index = this.tableData2.findIndex(item => item.id == row.id);
            if(index > -1) {
                this.tableData2.splice(index, 1);
            }
        },
        submitFun() {
            let params = {
                id: this.deptId,
                dutyUserIds: this.tableData2.map(item => item.id).join(),
                dutyUserNames: this.tableData2.map(item => item.username).join()
            }
            this.loading2 = true;
            addDeptDutyUser(params).then(res => {
                if(res.data.code == 1000) {
                    this.$notify({
                        title: '提示',
                        type: 'success',
                        message: '添加成功！'
                    })
                    this.$emit('refresh');
                    this.closeDialog();
                }
                this.loading2 = false;
            }).catch(error => {
                this.loading2 = false;
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.add-manage {
    .table-wrap {
        height: 350px;
        display: flex;
        .table-list {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid #ebeef5;
            .pagination {
                padding: 0 5px 5px;
            }
        }
        .selected {
            width: 250px;
            margin-left: 10px;
            border: 1px solid #ebeef5;
            border-bottom: none;
        }
    }

    /deep/ {
        .el-dialog__body {
            padding: 10px 20px;
        }
    }
}
</style>